<template>
  <h2>我是About的内容</h2>
</template>

<script>
export default {
    name:'AboutComponent',
    beforeDestroy() {
      console.log('About组件被销毁')
    },
    mounted() {
      console.log('About组件被挂载')
    },
    /**
     * 需要说明的是
     * beforeRouteEnter 是进入该组件的时候调用
     * 
     * beforeRouteLeave 是当点击了其它的路由，他才会被调用
     * 这两个和之前的前置和后置的概念要区别开
     * 前置和后置是包裹在路由上下的两个规则，存在同时调用的可能性
     * 但是这两头则是各司其事的
     */
    beforeRouteEnter (to, from, next) {
      // 通过路由规则，进入该组件时被调用
      next()
    },
    beforeRouteLeave (to, from, next) {
      // 通过路由规则，离开该组件时被调用
      next()
    }
}
</script>